<template>
  <div>
    <div class="navbar-div">
        <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
    </div>
    <div class="topimage-div">
        <img :src="goodsInfo.IMAGE1" width="100%"/>
    </div>

    <div class="goods-name">{{goodsInfo.NAME}}</div>
    <div class="goods-price">价格：{{goodsInfo.PRESENT_PRICE | Money}}</div>
    <div>
        <van-tabs swipeable sticky>
          <!-- swipeable开启混动切换tab页效果 sticky吸顶效果-->
          <van-tab title="商品详情">
            <div class="detail" v-html="goodsInfo.DETAIL">
            </div>
          </van-tab>
          <van-tab title="评价">
              正在制作中
          </van-tab>
        </van-tabs>
    </div>

    <!-- 加入购物车 -->
    <div class="goods-bottom">
        <div>
                <van-button size="large" type="primary" @click='addGoodsToCart'>加入购物车</van-button>
        </div>
        <div>
                <van-button size="large" type="danger">直接购买</van-button>
        </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import url from '@/serviceAPI.config.js'
  import {toMoney} from '@/filter/moneyFilter.js'  //过滤器
  export default {
    data() {
      return {
        goodsId: '',
        goodsInfo:{}, //商品详情数据
      }
    },
    filters:{
      Money(money){
        return toMoney(money)
      }
    },
    created(){
      // 一开始跳转进这个页面，就获取goodsId
      // console.log(this.$route.params.goodsId)
      // console.log(this.$route.query.goodsId)
      this.goodsId=this.$route.query.goodsId?this.$route.query.goodsId:this.$route.params.goodsId
      this.getInfo()
    },
    methods:{
      // 添加购物车方法
      addGoodsToCart(){
          //取出购物车内的商品数据
        // console.log(localStorage.getItem('cartInfo'))
        let cartInfo=null
        let isHaveGoods=false
        if(!localStorage.getItem('cartInfo')){
          cartInfo=[]
          isHaveGoods=false
        }else{
          cartInfo=JSON.parse(localStorage.getItem('cartInfo'))
          isHaveGoods=cartInfo.find(cart=>cart.goodsId==this.goodsId)
        }

        // 不管是上面代码，还是下面代码都会报错，但是这个报错不影响代码效果，估计是爬虫抓取数据的原因，导致一直报JSON有问题，暂时不管，不影响代码执行

        // let cartInfo = localStorage.getItem('cartInfo') ? JSON.parse(localStorage.getItem('cartInfo')) :[]
        // //判断购物车内是否已经有这个商品
        // //如果没有返回undeifnd，如果有返回第一个查找到的数据
        // let isHaveGoods=cartInfo.find(cart=>cart.goodsId==this.goodsId)
        // console.log(isHaveGoods)

        // 数组find的用法，如果有找到，则返回找到的这个，找不到返回undefined

        if(!isHaveGoods){
          //没有商品直接添加到数组中
          //重新组成添加到购物车的信息
          let newGoodsInfo={
              goodsId:this.goodsInfo.ID,
              Name:this.goodsInfo.NAME,
              price:this.goodsInfo.PRESENT_PRICE,
              image:this.goodsInfo.IMAGE1,
              count:1
            }
            cartInfo.push(newGoodsInfo) //添加到购物车
            localStorage.setItem('cartInfo',JSON.stringify(cartInfo))
            // localStorage.cartInfo=JSON.stringify(cartInfo) //操作本地数据
            this.$toast('添加成功');
            // Toast('添加成功')
          }else{
            this.$toast('已有此商品');
            // Toast('已有此商品')
          }
          this.$router.push({name:'Cart'})  //进行跳转
      },
      // 顶部左点击方法
      onClickLeft(){
        this.$router.go(-1)
      },
      // 请求商品详情
      getInfo(){
        axios({
          url:url.getDetailGoodsInfo,
          method:'post',
          data:{
            goodsId:this.goodsId
          }
        }).then(res=>{
          if(res.data.code==200&&res.data.message){
            this.goodsInfo=res.data.message
          }else{
            Toast('服务器错误，数据获取失败')
          }
          // console.log(this.goodsInfo)
        }).catch(error=>{
          console.log(error)
        })
      },

    }
  }
</script>

<style scoped>
  .detail{
     font-size:0px;
    }
    .goods-name{
        background-color: #fff;
    }
    .goods-price{
        background-color: #fff;
    }
    /* 加入购物车 */
    .goods-bottom{
        position: fixed;
        bottom:0px;
        left:0px;
        background-color: #FFF;
        width:100%;
        display: flex;
        flex-direction: row;
        flex-flow: nowrap;
    }
    .goods-bottom > div{
        flex:1;
        padding:5px;
    }
</style>
